<template>
  <base-layout :visible-content="false">
    <template #searchPanel>
      <el-row>
        <el-col :span="12">资金利息信息</el-col>
        <el-divider content-position="center"></el-divider>
      </el-row>
      <form-create v-model="cusutomerFormModel" :rule="rule" :option="option" />

      <el-row>
        <el-col :span="12">资金利息明细：</el-col>
        <el-divider content-position="center"></el-divider>
      </el-row>
      <el-table border :data="detailList">
        <el-table-column label="车辆进口来源" align="center">
          <template v-slot="{row}">
            <el-select v-model="row.source" class="w-100">
              <el-option
              v-for="item of dict['进口来源']"
              :key="item.index"
              :label="item.text"
              :value="item.value"
              >

              </el-option>

            </el-select>


          </template>
        </el-table-column>
        <el-table-column label="库存天数" align="center">
          <template v-slot="{row}">
            <div style="display:flex;align-items: center;">
            <el-input-number controls-position="right" :min="0" placeholder="最小值" v-model="row.minDay"/>-
            <el-input-number controls-position="right" :min="0" placeholder="最大值" v-model="row.maxDay"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="融资利率" align="center">
          <template v-slot="{row}">
             <div style="display:flex;align-items: center;width:100%"> <el-input-number style="flex:1" controls-position="right" :min="0" placeholder="请输入利率" v-model="row.rzbl"/>% 
             </div>
             </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template v-slot="{$index}">
             <i
            class="el-icon-delete"
            title="删除"

            style="color: red; cursor: pointer"
            @click="handleDataDelete($index)"
          ></i>
            
             </template>
        </el-table-column>
      </el-table>
      <div class="text-center mt10">
        <el-button type="success" icon="el-icon-plus" @click="addTableItem"></el-button>
      </div>
       <div class="text-right mt10">
        <el-button type="success"  @click="saveUpdate">保存</el-button>
      </div>
    </template>
  </base-layout>
</template>

<script>
import { addData, updateData,details } from '@/api/pre-sale/newCarStock/capitalInterest'
import baseMixin from '@/mixins/base'
import { getDict } from '@/utils/index'
import { rulesForm } from './rules'
import { mapGetters  } from 'vuex'
import { transferLabelAndValue } from '@/utils/pre-sale'
export default {
  name: 'editCustomerManage',
 props:['id'],
  mixins: [
    baseMixin({
      format(res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  data() {
    return {
      cusutomerFormModel: {},
      rule: rulesForm,
      option: {
        //显示表单重置按钮
        resetBtn: false,
        submitBtn: false,
      },
      dict: {},
      detailList: [],
      filters: {},
      // rules: rules,
      currentCar: {},
      type: '',
      
    }
  },
computed:{
  ...mapGetters(['stores'])
},
  async created() {
    this.dict = getDict(['进口来源'])
   console.log(this.id)
  },
  methods: {
    handleClick() {},
    async saveUpdate() {
      this.cusutomerFormModel.submit(async formData=>{
        const params={
          ...formData,
          detailList:this.detailList
        }
     if(this.id){
       await updateData({...params,id:this.id})
     }else{
        await  addData(params)
     }
      this.$router.push({ name: 'capitalInterest' })
      })
    },

    editCarInfo(row, type) {
      this.currentCar = row
      this.type = type
      this.dialogVisible = true
    },
    handleDataDelete(index){
      this.detailList.splice(index,1)
    },
    addTableItem(){
      this.detailList.push({
         maxDay: 0,
          minDay: 0,
          rzbl: 0,
          source: '国产'
      })
    }
  },
  async mounted() {
    setTimeout(() => {
      this.cusutomerFormModel.updateRule('storeId',{
        options:transferLabelAndValue(this.stores,['storeName','id'])
      })
    }, 500);

    if(this.id){
      const {data}=await details(this.id)
      this.cusutomerFormModel.setValue(data);
      this.detailList=data.detailList;
    }


  },
}
</script>

<style lang="scss" scoped>
.mt10 {
  margin-top: 10px;
}
.ml10 {
  margin-left: 10px;
}
</style>
